<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="字典名称">
      <el-select v-model="form" placeholder="字典名称">
        <el-option v-for="t in types" :label="t.dictName" :value="t.dictType" :key="t.dictId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="字典标签">
    <el-input v-model="formInline.dictLabel" placeholder="字典标签"></el-input>
  </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="异常" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-button @click="openadd">新增</el-button>
  <el-button @click="excel">excel</el-button>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="dictId"
        label="字典编码">
    </el-table-column>
    <el-table-column
        prop="dictLabel"
        label="字典标签">
    </el-table-column>
    <el-table-column
        prop="dictValue"
        label="字典键值">
    </el-table-column>
    <el-table-column
        prop="dictSort"
        label="字典排序">
    </el-table-column>
    <el-table-column
        label="状态">
      <template v-slot="scope">
        <el-tag v-if="scope.row.status==0">正常</el-tag>
        <el-tag v-if="scope.row.status==1">异常</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="openupdate(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="del(scope.row.dictId)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="修改字典" :visible.sync="dialogFormVisible">
    <el-form :model="formupdate">
      <el-form-item label="字典类型">
        <el-input v-model="formupdate.dictType" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="数据标签">
        <el-input v-model="formupdate.dictLabel"></el-input>
      </el-form-item>
      <el-form-item label="数据键值">
        <el-input v-model="formupdate.dictValue"></el-input>
      </el-form-item>
      <el-form-item label="样式属性">
        <el-input v-model="formupdate.cssClass"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="formupdate.dictSort" controls-position="right" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="回显样式">
        <el-select v-model="formupdate.listClass">
          <el-option label="默认(default)" value="default"></el-option>
          <el-option label="主要(primary)" value="primary"></el-option>
          <el-option label="成功(success)" value="success"></el-option>
          <el-option label="信息(info)" value="info"></el-option>
          <el-option label="警告(warning)" value="warning"></el-option>
          <el-option label="危险(danger)" value="danger"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="formupdate.status" label="0">正常</el-radio>
        <el-radio v-model="formupdate.status" label="1">异常</el-radio>
      </el-form-item>
      <el-form-item label="备注"  label-width="120px">
        <el-input type="textarea" v-model="formupdate.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="新增字典" :visible.sync="dialogFormVisibled">
    <el-form :model="formuadd">
      <el-form-item label="字典类型">
        <el-input v-model="form" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="数据标签">
        <el-input v-model="formuadd.dictLabel"></el-input>
      </el-form-item>
      <el-form-item label="数据键值">
        <el-input v-model="formuadd.dictValue"></el-input>
      </el-form-item>
      <el-form-item label="样式属性">
        <el-input v-model="formuadd.cssClass"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="formuadd.dictSort" controls-position="right" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="回显样式">
        <el-select v-model="formuadd.listClass">
          <el-option label="默认(default)" value="default"></el-option>
          <el-option label="主要(primary)" value="primary"></el-option>
          <el-option label="成功(success)" value="success"></el-option>
          <el-option label="信息(info)" value="info"></el-option>
          <el-option label="警告(warning)" value="warning"></el-option>
          <el-option label="危险(danger)" value="danger"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="formuadd.status" label="0">正常</el-radio>
        <el-radio v-model="formuadd.status" label="1">异常</el-radio>
      </el-form-item>
      <el-form-item label="备注"  label-width="120px">
        <el-input type="textarea" v-model="formuadd.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibled = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      formInline:{},
      types:[],
      form:this.$route.query.dictType,
      dialogFormVisible:false,
      formupdate:{},
      formuadd:{},
      dialogFormVisibled:false,
    }
  },
  methods:{
    list(){
      this.formInline.dictType = this.form;
      this.axios.post("http://localhost:8090/type/dataList",this.formInline).then(r=>{
        this.tableData=r.data.data;
      })
    },
    typeList(){
      this.axios.post("http://localhost:8090/type/typeList").then(r=>{
        this.types=r.data.data;
        this.formInline.dictType=this.form;
      })
    },
    onSubmit(){
      this.list();
    },
    openupdate(sysdictdata){
      this.dialogFormVisible=true;
      this.formupdate=sysdictdata;
    },
    update(){
      this.axios.post("http://localhost:8090/type/updateData",this.formupdate).then(()=>{
        this.dialogFormVisible=false;
        this.$message.success("修改成功");
        this.list();
      })
    },
    openadd(){
      this.dialogFormVisibled=true;
    },
    add(){
      this.formuadd.dictType=this.form;
      this.axios.post("http://localhost:8090/type/addDate",this.formuadd).then(()=>{
        this.$message.success("新增成功");
        this.dialogFormVisibled=false;
      })
    },
    del(dictId){
      this.axios.post("http://localhost:8090/type/delData?dictId="+dictId).then(()=>{
        this.$message.success("删除成功");
      })
    }
  },
  created(){
    this.list();
    this.typeList()
  }
}
</script>

<style scoped>

</style>